const path = require('path') //nodejs的路径模块

let NODE_ENV = process.env.NODE_ENV || 'production'
//导入 插件
let HtmlWebpackPlugin = require('html-webpack-plugin')
let { CleanWebpackPlugin } = require('clean-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  entry: './src/index.js', //入口文件路径
  output: {
    //出口
    filename: NODE_ENV === 'production' ? 'end.[hash].min.js' : 'end.[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: NODE_ENV,
  plugins: [
    //使用插件
    new HtmlWebpackPlugin({
      template: './public/index.html', //指定自己的html文件
      filename: 'index.html', //生成的html的文件名称
      //hash:true,//给引入的文添加hash值
      minify: {
        collapseWhitespace: true, //去掉html内容空格
        removeComments: true, //去掉注释
        removeAttributeQuotes: true, //去掉属性的引号
        removeEmptyAttributes: true //属性值为空的去掉
      }
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      //=>设置编译后的文件名字
      filename: 'main.[hash].css'
    })
  ],
  devServer: {
    port: '8082', //端口号
    host: '127.0.0.1', //域名
    static: {
      //打开页面的路径
      directory: path.join(__dirname, 'dist')
    },
    hot: true, //是否热更新
    open: true, //是否自动打开页面
    proxy: {
      //配置跨域代理
      '/': {
        target: 'https://www.jianshu.com',
        changeOrigin: true //伪装访问源
      }
    }
  },
  module: {
    // 配置loader
    rules: [
      // 配置规则 ---css,图片等
      {
        test: /\.(css|less)$/, // 配置css
        use: [
          MiniCssExtractPlugin.loader, //使用link
          // 'style-loader', //=>把CSS插入到HEAD中
          'css-loader', //=>编译解析@import/URL()这种语法
          'postcss-loader', //=>设置前缀
          'less-loader' // 将less 转为css
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            //=>把指定大小内的图片BASE64
            //=>不在指定范围的采用file-loader进行处理
            loader: 'url-loader',
            options: {
              //小于200kB的图片自动 base64，大于的 file-loader
              limit: 200 * 1024,
              //输出后的路径 dist/images
              outputPath: '/images'
              //name:'[name].[ext]'
            }
          }
        ],
        // 除了...的文件
        exclude: /node_modules/
        // 只处理... 的文件
        // includes: /images/
      },
      {
        test: /\.(svg|eot|ttf|woff|woff2)$/i,
        use: 'file-loader'
      },
      {
        test: /\.html$/,
        use: ['html-withimg-loader']
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              //=>转换的语法预设（ES6->ES5）
              presets: ['@babel/preset-env'],
              //=>基于插件处理ES6/ES7中CLASS的特殊语法
              //注意 不能处理Promise
              plugins: [
                [
                  '@babel/plugin-proposal-decorators',
                  {
                    legacy: true
                  }
                ],
                [
                  '@babel/plugin-proposal-class-properties',
                  {
                    loose: true
                  }
                ],
                '@babel/plugin-transform-runtime'
              ]
            }
          }
        ],
        //=>设置编译时忽略的文件和指定编译目录
        // include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/
      }
    ]
  },
  optimization: {
    minimize: true,
    // 代码压缩的优化项
    minimizer: [
      // 实现CSS压缩
      new OptimizeCssAssetsWebpackPlugin(),
      //实现js压缩
      new TerserPlugin()
    ]
  }
}
